<template>
  <div class="search-bar">
    <el-input
      v-model="sQuery"
      placeholder="Search anime..."
      clearable
      @input="fnOnSearch"
    >
      <template #prefix>
        <el-icon><Search /></el-icon>
      </template>
    </el-input>
  </div>
</template>

<script setup>

const sQuery = ref('');

// 使用 defineEmits 定义事件
const aEmit = defineEmits(['search']);

// 定义 onSearch 方法
const fnOnSearch = () => {
  aEmit('search', sQuery.value);
};
</script>

<style scoped>
.search-bar {
  margin-bottom: 20px;
}
</style>